<template>
  <div>
    <div class="filter-con">
      <div class="flex-bt bg-w mh-pd filter-sel">
        <a href="javascript:" @tap="handleSubFilter(1)">
          <span>城市</span>
          <span class="mh-arrow-down"></span>
        </a>
        <a href="javascript:" @tap="handleSubFilter(2)">
          <span>互动内容</span>
          <span class="mh-arrow-down"></span>
        </a>
        <a href="javascript:" @tap="handleSubFilter(3)">
          <span>最近互动</span>
          <span class="mh-arrow-down"></span>
        </a>
      </div>

      <div class="filt-con-layer">
        <!--筛选-城市-->
        <transition name="slide-fade" mode="out-in">
          <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 1">
            <li class="mui-table-view-cell" v-for="item in filterCon.interactContent">
              <a class="mui-navigate-right" @click='search(1, item.value)'>
                {{item.name}}
              </a>
            </li>
          </ul>
        </transition>
        <!--筛选-互动内容-->
        <transition name="slide-fade" mode="out-in">
          <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 2">
            <li class="mui-table-view-cell" v-for="item in filterCon.matcherLevel">
              <a class="mui-navigate-right" @click='search(2, item.type)'>
                {{item.level}}
              </a>
            </li>
          </ul>
        </transition>
        <!--筛选-最近互动-->
        <transition name="slide-fade" mode="out-in">
          <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 3">
            <li class="mui-table-view-cell" v-for="item in filterCon.matcherTime">
              <a class="mui-navigate-right" @click='search(3, item.value)'>
                {{item.name}}
              </a>
            </li>
          </ul>
        </transition>
      </div>
    </div>
    <div class="maker-list bg-w">
      <div class="maker-type mh-pd">
        <h4>最近联系</h4>
        <swiper :options="swiperOption" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in recentContacter" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.portrait" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.nickname">用户名</p>
                <p class="con-rest"><span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="maker-type mh-pd">
        <h4>红娘好友</h4>
        <swiper :options="swiperOption" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in recentContacter" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.portrait" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.nickname">用户名</p>
                <p class="con-rest"><span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="maker-type mh-pd">
        <h4>筛选列表</h4>
        <swiper :options="swiperOptionFilt" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in newData" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.portrait" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.nickname">用户名</p>
                <p class="con-rest"><span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="maker-list bg-w">
        <div class="maker-type mh-pd">
          <h4>地图列表</h4>
          <!--地图列表-->
          <div class="maker-map">
            <map-list> </map-list>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import MapList from '@/components/hn-list/map-list'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  import {MH_API} from "@/api/api";
  export default {
    name: "my-matchmaker",
    data () {
      return {
        swiperOption: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 1,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        swiperOptionFilt: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 3,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        showBack: false,
        activeFootTab: 0,
        activeFilter: 0,
        filterCon: {
          interactContent: [
            {
              name: '城市',
              value: '1'
            },
            {
              name: '红娘评级',
              value: '2'
            }
          ],
          matcherLevel: [
            {
              level: '互动内容',
              type: 1
            },
            {
              level: '红娘评级',
              type: 2
            },
            {
              level: '互动距离',
              type: 3
            },
            {
              level: '互动人数',
              type: 4
            }
          ],
          matcherTime: [
            {
              name: '最新互动',
              value: '1'
            },
            {
              name: '过期互动',
              value: '2'
            }
          ],
        },
        filterSubFilter: 0,
        recentContacter: [
          // {
          //   id: '10001',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //   name: '大兵',
          //   boy: 32,
          //   girl: 32
          // },
        ],
        newData: []
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    mounted () {
    },
    methods: {
      handleSubFilter (i) {
        this.filterSubFilter = i;
      },
      getData(type){
        let self = this;
        MH_API.hongNiangList({
          type: '',
          hong_type: '',
          hong_level: '',
        }).then(res => {
          if (res.status === 200) {
            self.recentContacter = res.data;
          }
        })
      },
      search(type, val){
        let self = this;
        let hong_type = '', hong_level = '', time_type = '';
        if(type==1){
          hong_level = val
        }
        else if(type==2){
          hong_type = val
        }
        else if(type==3){
          time_type = val
        }
        MH_API.hongNiangList({
          type: time_type,
          hong_type: hong_type,
          hong_level: '',
        }).then(res => {
          if (res.status === 200) {
            self.newData = res.data;
          }
        })
      }
    },
    components: {
      swiper,
      swiperSlide,
      MapList
    },
    created(){
      this.getData(1);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .filter-con {
    width: 100%;
    border-bottom: 1px solid #eee;
    overflow-x: hidden;
  }
  .filter-sel {
    padding: 1rem 2rem;
    @include sc(1.3rem, #333);
  }
  .mui-table-view-cell {font-size: 1.3rem;}
  .mh-arrow-down {border-top-color: #de73a4}
  .maker-list {margin-top: 1rem;}
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(3.2rem, 3.2rem)
  }
  .maker-type {
    border-bottom: 1px solid #eee;
    h4 {
      margin-bottom: 1rem;
      @include sc(1.5rem, #333);
    }
    .con-r {flex: 1;margin-left: .2rem;}
    .con-name {@include sc(1.5rem, #333);}
    .con-rest {@include sc(1.2rem, #999);}
  }
  .maker-map {
    margin-top: 1rem;
    width: 100%;
    height: 20rem;
    overflow: hidden;
  }
</style>
